import React from "react";
import { message } from "antd";
import ImageTrigger from "components/image-trigger";
import commonImage from "images/commonFunc.png";
import commonActiveImage from "images/commonFunc-active.png";

export default {
  key: "image-trigger",
  name: "ImageTrigger 图片触发行为",
  author: "王梦莎",
  description: "通过鼠标触发行为更改图片url",
  isExampleFull: true,
  api: [
    {
      title: "API",
      description: "",
      data: [
        {
          param: "trigger",
          description: "触发行为，可选 hover | click",
          type: "string",
          defaultValue: "hover",
        },
        {
          param: "defaultUrl",
          description: "必填。默认图片url",
          type: "string",
          defaultValue: "-",
        },
        {
          param: "triggerUrl",
          description: "必填。触发后的图片url",
          type: "string",
          defaultValue: "-",
        },
        {
          param: "className",
          description: "图片类名",
          type: "string",
          defaultValue: "-",
        },
        {
          param: "style",
          description: "图片内联样式",
          type: "object",
          defaultValue: "{}",
        },
        {
          param: "onClick",
          description: "图片点击事件",
          type: "function()",
          defaultValue: "() => {}",
        },
      ],
    },
  ],
  example: [
    {
      title: "基础用法",
      description: "hover时，更改图片url，点击时触发事件",
      state: {},
      getMethod: () => ({}),
      getContent: () => {
        return (
          <ImageTrigger
            defaultUrl={commonImage}
            triggerUrl={commonActiveImage}
            style={{ width: 50 }}
            onClick={() => message.success("hello")}
          />
        );
      },
    },
  ],
};
